<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script src="echarts.common.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;min-height:10.5rem;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        function initChart(initData) {
            var newDataArr = [];
            var unit = '';
            //ios
            for(var i = 0; i < initData.legend.length ; i++){
                var item = initData.legend[i]
                if (item.indexOf('(') > 0) {
                    unit = item.slice( item.indexOf('(') + 1 , item.indexOf(')'))
                }
            }
            // initData.legend.forEach((item) => {
            //     if (item.indexOf('(') > 0) {
            //         unit = item.legend.slice( item.indexOf('(') + 1 , item.indexOf(')'))
            //     }
            // })
            // 基于准备好的dom，初始化echarts实例
            option = {
                color: ['red','blue'], //两条线颜色
                animation: false,
                legend: {
                    show: initData.legendShow === undefined ? true : initData.legendShow,
                    icon: 'image://line.png',
                    type: 'scroll',
                    data: initData.legend,
                    bottom: 10,
                    textStyle: {
                        color: 'rgb(170,170,170)',
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    backgroundColor: 'rgba(245, 245, 245, 0.8)',
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: 10,
                    textStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    formatter: function (params) {
                        var result = '';
                        for (let i = 0; i < params.length; i++) {
                            const item = params[i];
                            if (item.seriesName.indexOf('(') > 0) {
                                result +=
                                    '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '"></span>' + item.axisValue + '</br>' + item.seriesName.slice(0, item.seriesName.indexOf('(')) + '&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                            } else {
                                result += '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '">' + '</span>' + item.axisValue + '</br>' + item.seriesName +'&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                            }
                        }
                        // params.forEach(function (item) {
                        //     if (item.seriesName.indexOf('(') > 0) {
                        //         result +=
                        //             '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '"></span>' + item.axisValue + '</br>' + item.seriesName.slice(0, item.seriesName.indexOf('(')) + '&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                        //     } else {
                        //         result += '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '">' + '</span>' + item.axisValue + '</br>' + item.seriesName +'&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                        //     }
                        // });


                        return result;
                    },
                    lineStyle: {
                        color: 'red',
                        width: 0.5,
                        opacity: 1
                    },
                    position: function (pos, params, el, elRect, size) {
                        var obj = {
                            top: 10
                        };
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10;
                        return obj;
                    },
                },
                xAxis: [{
                    data: initData.xData,
                    axisPointer: {
                        label: {
                            show: false
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    nameTextStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },

                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisPointer: {
                        label: {
                            show: false
                        },
                    },
                    nameTextStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    axisLabel: {
                        formatter: function (params) {
                            if (String(params).indexOf('.') >= 0) {
                                return params
                            } else {
                                return String(params) + unit
                            }
                        },
                        textStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                }],
                grid: [{
                    tooltip: {
                        axisPointer: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    left: '12%',
                    right: '5%',
                    top: '8%'
                }],
                series: []
            };
            if (initData.color && initData.color.length > 0) {
                option.color = initData.color
            }

            for (let a = 0; a < initData.yData.length; a++) {
                var item = initData.yData[a];
                var id = a 
                var itemData = {}
                itemData.type = 'line'
                itemData.name = initData.legend[id]
                itemData.data = item
                itemData.smooth = true
                itemData.itemStyle = {
                        normal: {
                            color: initData.color ? initData.color[id] : 'red'
                        }
                    },
                    itemData.areaStyle = {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: initData.color ? initData.color[id] : '#fff'
                            }, {
                                offset: 1,
                                color: 'white'
                            }])
                        },
                    },
                    itemData.lineStyle = {
                        normal: {
                            width: 1
                        }
                    },
                    itemData.symbol = 'none',
                    option.series.push(itemData)
            }
            // initData.yData.forEach((item, id) => {
            //     var itemData = {}
            //     itemData.type = 'line'
            //     itemData.name = initData.legend[id]
            //     itemData.data = item
            //     itemData.smooth = true
            //     itemData.itemStyle = {
            //             normal: {
            //                 color: initData.color ? initData.color[id] : 'red'
            //             }
            //         },
            //         itemData.areaStyle = {
            //             normal: {
            //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: initData.color ? initData.color[id] : '#fff'
            //                 }, {
            //                     offset: 1,
            //                     color: 'white'
            //                 }])
            //             },
            //         },
            //         itemData.lineStyle = {
            //             normal: {
            //                 width: 1
            //             }
            //         },
            //         itemData.symbol = 'none',
            //         option.series.push(itemData)
            // })


            setChart(option)
        }
        function setChart(data) {
            if (myChart) {
                myChart.clear()
            }
            // 使用刚指定的配置项和数据显示图表。
            //setTimeout(() => {
            myChart.setOption(option);
            //}, 100);
        }
    </script>
</body>
</html>
